<style type="text/css" media="all">
   .page{
      height:100%;
   }
   .textContainer {
      position: fixed;
      width: 100%;
      height: 90%;
      margin-top: 44px;
      background-color: white;
        top: 0px;
      left: 0px;
   }
   .issueTextarea{
      /*width: 100%;*/
      height:54% !important;
      border:none;
      padding:5px 5px;
      color:black;
      margin-bottom: 0px !important;
      z-index: 100;
   }
/*----simona---modify----*/
.issueTextarea>img {
   width: 20px;
   height: 20px;
}
.emotions li.emotion {
float: left;
width: 24px;
height: 24px;
/*background-image: url('../base/img/qq.gif');*/
/*background-repeat: no-repeat;*/
margin: 5px;
}
.emotions li.emotion>img {
   width: 100%;
   height: 100%;
}
/*----simona---modify----*/

   .clearTweet{
      color:red;
      /* margin-left: -5px; */
   }
   .countTween {
      float:right;
      position: fixed;
      right:10px;
      bottom:60px;
      width: 36px;
      height: 15px!important;
      text-align: center;
      border-radius: 10px;
      background:rgb(233, 230, 230);
   }
   .allowNum{
      color:black;
      float:left;
   }
   .content{
      position: relative;
      height:88%;
      overflow-y:hidden; 
   }

  /* .countTween:active{
      background:rgb(210,210,210);
   }*/
   /* -------------------------------------foot--------------------------------- */
   footer.bar-tab li.active{
   color: white !important;
   }
   .tab-item.active{
   box-shadow:  0 0 0px rgba(0,0,0,0);
   }
   .tab-item:active{
   box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
   }
   #TweetEmotions{
      background-color: #f6f6f6;
      height: 160px;
      overflow-y:scroll; 
      padding:5px;
   }
   .publish{
      top: -3px!important;
   }
   .icon_call{
      position: absolute;
      margin-bottom: 20px;
      width: 25%;
      text-align: center;
   }
   .icon—_img{
      width: 31px;
      height: 29px;
   }

   #uploadImageContent{
      float:right;
      position: fixed;
      left:10px;
      bottom:100px;
      width: 36px;
      height: 15px!important;
      text-align: center;
      border: 0px;
   }


   #uploadImage{
      width: 50px;
      height: 50px;
   }

/*表情滑动*/
#TweetEmotions {
   position:absolute;
   z-index:1;
   /*top:45px; */
   bottom:0px;
   left:0;
   width:98%;
   overflow:auto;
}
#scroller {
   position:absolute; z-index:1;
/* -webkit-touch-callout:none;*/
/*height:120px;*/
   -webkit-tap-highlight-color:rgba(0,0,0,0);
   width:100%;
   padding:0;
}
</style>

<script id="emotionsTemplate" type="text/x-jquery-tmpl">
<div id="scroller">
<ul>
<%_.each(emotions,function(item){%>

<li  class="emotion" data-num=<%=item.num%>>
<img src="../base/img/f<%=item.alias%>.ing"/>
</li>

<% });%>
</ul>
</div>
</script>
<!-- <li data-alias ="<%=item.alias%>" class="emotion" data-num=<%=item.num%>>
<img src="../base/img/f<%=item.num%>.ing"/>
</li> --><!--  -->

<!-- header -->
<header class="bar-title">
   <div class="left-banner">
      <span class="backBtn icon-reply imgsize"></span>
   </div>
   <h1 class="title">动弹一下</h1>
   <div class="right-banner">
   <p class="button issueTweet imgsize publish">发&nbsp;布</p>
   </div>
</header>

<!-- uncomment this if you want a sencondary-bars

<nav class="bar-standard bar-header-secondary"></nav>
-->
<!-- content -->

<div class="textContainer">
<textarea class="issueTextarea" placeholder="请输入动弹内容" id="issueTextarea">
</textarea>
<div id= "uploadImageContent">
   <img id="uploadImage" src="" alt="" style="display:none">
</div>
<div class="countTween">
   <span class="allowNum" id="allowNum">160</span>
   <span class="clearTweet icon-remove" id="clearTweet"></span>
</div>
</div>
<div class="emotions" id="TweetEmotions" >
   <!-- 模板插入内容 -->
</div> 
<footer class="bar-tab">

<ul class="tab-inner">
   <li data-module="news" data-value="news/news-list" class="tab-item" id="showEmotion" data-sign="up">
      <span class="icon-smile icon-2x footerImgCenter"></span>
   </li>
   <li id="getPicture" data-module="question" data-value="question/question-list" class="tab-item">
      <span class="icon-picture icon-2x footerImgCenter"></span>
   </li>
   <li data-module="tweet" data-value="tweet/tweet-list" class="tab-item" id="insertUserName">
      <!-- <span class="icon-2x footerImgCenter icon_call"><div class="icon_call">@</div></span> -->
      <span class="icon-2x footerImgCenter"><img src="../base/img/icon-call.png" class="icon—_img"/>
      </span>
   </li>
   <li data-module="tweet" data-value="tweet/tweet-list" class="tab-item" id="insertSoftName">
      <!-- <span class="icon-2x footerImgCenter"><div class="icon_jin">#</div></span> -->
      <span class="icon-2x footerImgCenter"><img src="../base/img/icon-jing.png" class="icon—_img"></span>
   </li>

</ul>
</footer>
  